<template>
  <div class='sceneryHeader'>
    <div class="header">
      <div class="top" :style="details.bg">
        <div class="back" @click="back"></div>
        <h1>{{details.where}}</h1>
        <div class="switch" @click="qiehuanfun">切换</div>
        <div class='sheying' @click='sheyingfun'>摄影</div>
      </div>
    </div>
    <div class="content">
      <div class="txt" @click="introduce">{{details.content}}</div>
      <div class="classify" @click="introduce">
        <div v-for='(i,index) in details.classify' :key="index">
          <h2>{{i.title}}</h2>
          <div>{{i.content}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: '',
  methods: {
    back () {
      this.$router.push({
        path: '/sousuo'
      })
    },
    qiehuanfun () {
      this.$router.push({
        path: '/qiehuan'
      })
    },
    sheyingfun () {
      this.$router.push({
        path: '/sheying'
      })
    },
    introduce () {
      this.$router.push({
        path: '/introduce'
      })
    }
  },
  computed: {
    details () {
      var scenery = localStorage.getItem('scenery')
      if (scenery === '武功山') {
        return {
          where: '武功山',
          bg: 'backgroundImage:url(/static/Scenery/wugongshanbg.jpg)',
          content: '武功山位于中国江西省，集人文景观和自然景观为一体的山岳型风景名胜区。徒步全程21公里，在户外界称为“南武功山，北太白”，与秦岭太白山并称我国南北两大两大徒步名山，2009年被评为中国十大非著名山峰。武功山是保持原生态的一座处女山，以瀑布群、高山草甸、金顶古祭坛群为三大绝景。素有“云中草原，户外天堂”之称，10万亩草甸绵延于1600多米的高山之巅，春夏绿油油，秋季金灿灿，冬天白皑皑。养在深闺的武功山，逐渐成为登山爱好者和徒步露营的挚爱之一，穿越途中一路花繁叶茂、流水潺潺、高山草甸之上五颜六色的帐篷和满眼的绿意交相辉映，登上武功山最高峰——金顶，翻滚的云海和壮丽的日出让人如入仙境。',
          classify: [
            {
              title: '最佳季节',
              content: '武功山气候温和，四季分明，年平均气温14-16℃，是良好的避暑胜地。5-10月是武功山最美的时节。4月下旬-5月上旬，福星谷和红岩谷方向的杜鹃花开得正灿烂，漫山红遍，非常美丽。6-8月是避暑的好时节，高山草甸绿草茵茵，山间瀑布水量充沛，风光无限。9-10月，9 月中旬有盛大的帐篷节，枫叶满山，草甸被秋色染成金灿灿的一片，格外耀眼。11月，一些驴友对武功山的冰盖和雪景也情有独钟。'
            },
            {
              title: '建议游玩',
              content: '明月山山上主要有奇峰峭壁、瀑布溪流、高山草甸、云海日出等多种奇幻的自然风光，以及佛家、道家很多的宗教建筑。山路上共有五条瀑布，有抱月亭、浸月潭等景点，其中最著名的便是云谷飞瀑，为江南一带落差最大的瀑布。太平山最为著名的是山顶的高山草甸，在江南一带很罕见，如果居住在景区，太平山日出也是不可错过的景观。羊狮幕武功山景区的一部分，素有小黄山之称。羊狮慕风景区有“四绝”分别是奇峰怪石，古树名花，流泉飞瀑，云海雾涛，另外还有罕见奇观“佛光”。它与金顶是姐妹峰，山上植被被保护的很好，到处都是奇异珍木，被很多名人墨客赞颂。如果赶上大雾天，如同误入仙境一般，不过要小心谨慎，因为脚下路滑。天沐·明月山温泉度假村以温泉为主导产品，它拥有800多年历史的温汤地热温泉，从地下470米深处花岗岩中涌出，日出水量7000吨，水质优良，水温常年保持在68℃-72℃，无色无味，具有低矿化度、低钠、富硒、偏硅酸含量高等特点'
            },
            {
              title: '语言',
              content: '普通话'
            }
          ]
        }
      } else if (scenery === '新疆') {
        return {
          where: '新疆',
          bg: 'backgroundImage:url(/static/Scenery/xinjiangbg.jpg)',
          content: `新疆维吾尔自治区，首府乌鲁木齐市，位于中国西北边陲，是中国五个少数民族自治区之一，也是中国陆地面积最大的省级行政区，面积166万平方公里，占中国国土总面积六分之一。拥有海拔8600米的世界第二高峰，又有低于海平面154米的中国最低洼地，既有一泄千里的河流、万顷碧波的草原，又有光怪陆离的戈壁幻境，神秘莫测的沙漠奇观。来到这，你才能理解什么叫幅员辽阔~  新疆兼具美景和人文，对任何一位旅者来说，它都不会是一个枯燥乏味的目的地。辽阔、丰富的地域让这里并存着生机与萧瑟，这里既有漫山盛放的杏花、广阔的草原风光、金黄一片的白桦林，也有无边无际的大漠风光、炙热难耐的火焰山和凄凉壮阔的雅丹地貌。而昔日繁华的古丝绸之路，更赋予了它丰富而又深厚的文化底蕴。吐鲁番、哈密、喀什、库车、和田等，都是曾经繁华路上的重镇。直至今日，它们还保留着当年宗教、商业、各民族文化交融的痕迹与证据，吸引着众多文化旅者前来探寻。此外，独具特色的新疆美食更为旅途锦上添花。大盘鸡、飘香四溢的烤肉、香甜可口的瓜果，都是人们离开之后还念念不忘的美味，说是吸引你再去一次新疆的缘由，也丝毫不为过。`,
          classify: []
        }
      } else {
        return {
          where: '你猜猜看',
          bg: 'backgroundColor:orange',
          content: '',
          classify: []
        }
      }
    }
  }
}
</script>
<style scoped lang='less'>
.header{
  width: 100%;
  .top{
    width: 100%;
    box-sizing:border-box;
    height: 240px;
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
    &::after{
      content:'';
      display: block;
      clear:both;
    }
    .back{
      width: 20px;
      height: 20px;
      background-image: url(/static/Scenery/left.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      position:relative;
      top: 20px;
      left: 20px;
    }
    h1{
      font-size:24px;
      color:#fff;
      margin-top:115px;
      margin-left:15px;
      float:left;
    }
    .switch{
      float:left;
      font-size:10px;
      color:#333;
      background-color: #fff;
      width: 45px;
      height: 26px;
      line-height:26px;
      border-radius:20px;
      margin-top:120px;
      margin-left:13px;
      padding-left: 10px;
      text-align:left;
      background-image: url(/static/Scenery/qiehuan.png);
      background-repeat: no-repeat;
      background-position: center right 7px;
      background-size: 10px 6px ;
    }
    .sheying{
      font-size:16px;
      float:right;
      padding-right:10px;
      margin-top:150px;
      width: 70px;
      height: 30px;
      line-height:30px;
      text-align: right;
      border-radius:20px 0 0 20px;
      color:#fff;
      background-color: rgba(0,0,0,.6);
      background-image: url(/static/Scenery/sheying.png);
      background-repeat: no-repeat;
      background-position: center right 50px;
      background-size: 20px 16px;
    }
  }
}
.content{
  padding-top: 15px;
  width: 100%;
  box-sizing:border-box;
  border-radius: 10px 10px 0 0;
  margin-top:-20px;
  background-color: #fff;
  box-shadow: 0 4px 2px 0px #ededed;
  .txt{
    margin:0 20px 15px;
    padding-right: 30px;
    background-image: url(/static/Scenery/right.png);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 8px 11px;
    /*多行文本溢出显示省略号*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .classify{
    padding: 0 20px 20px 20px;
    text-align:left;
    display: flex;
    justify-content: space-around;
    &>div{
      width: 28%;
      padding:5px 5px;
      border-radius:8px;
      background-color: #f9f8f5;
      background-image: url(/static/Scenery/bg2.png);
      background-repeat: no-repeat;
      background-position: right bottom;
      background-size: 40px 40px;
      &>h2{
        width: 70px;
        font-size:15px;
        margin-bottom:5px;
        background-image: url(/static/Scenery/rightdark.png);
        background-size: 5px 9px;
        background-repeat: no-repeat;
        background-position: center right;
      }
      &>div{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
  }
}
</style>
